<template>
  <el-dialog title="新增租车类型" width="30%" :visible.sync="dialogVisible" @close="close" :close-on-click-modal="false" @opened="opened" >
    <vue-form ref="vueForm" :formItem="form_item" :fromHandler="form_handler" :formData="form_data"></vue-form>
  </el-dialog>
</template>

<script>
import { LeaseAdd, LeaseEdit } from "@/api/lease.js"
import VueForm from "@c/form";

export default {
  components: {
    VueForm
  },
  props: {
    flagVisible:{type:Boolean,default:false},
    data:{type:Object,default:()=>{}}
  },
  watch: {
    flagVisible: {
      handler(newValue, oldValue) {
        this.dialogVisible = newValue;
      }
    },
    data: {
      handler(newValue) {
        this.form_data = newValue;
      },
    }
  },
  data() {
    return {
      dialogVisible: false,
      form_handler: [
        {label: "确定",key:"submit",type:"primary",handler:()=>this.onSubmit()},
        // {label: "重置",key:"reset",type:"danger",handler:()=>this.reset()}
      ],
      form_data: {
        carsLeaseTypeName: "",
        carsLeaseStatus: "",
        carsLeaseDesc: "",
      },
      form_item: [
        {type:"Input",label:"租车类型",prop:"carsLeaseTypeName",required:true},
        {type:"Disabled",label:"禁/启状态",prop:"carsLeaseStatus",required:true},
        {type:"Textarea",label:"描述",prop:"carsLeaseDesc"},
      ],
    }
  },
  methods: {
    opened() {
    },
    close() {
      this.reset();
      delete this.form_data.carsLeaseTypeId;
      this.$emit("update:flagVisible",false)
    },
    onSubmit() {
      this.$refs.vueForm.$refs.form.validate((valid) => {
        if (valid) {
          this.form_data.carsLeaseTypeId? this.edit():this.add();
        }
      });
    },
    edit() {
      LeaseEdit(this.form_data)
        .then((res) => {
          const data = res;
          this.$message({
            message: data.message,
            type: "success"
          });
          this.$store.commit("common/SET_TABLE_DATA_FLAG");
          this.reset();
        })
    },
    add() {
      LeaseAdd(this.form_data)
        .then((res) => {
          const data = res;
          this.$message({
            message: data.message,
            type: "success"
          });
          this.$store.commit("common/SET_TABLE_DATA_FLAG");
          this.reset();
        })
    },
    reset() {
      this.$refs.vueForm.resetForm();
    }
  }
}
</script>

<style lang="scss" scoped>
.upload-img-wrap {
  display: flex;
  .upload-img {
    position: relative;
    background-color: #fbfdff;
    border: 1px dashed #c0ccda;
    border-radius: 6px;
    box-sizing: border-box;
    width: 148px;
    height: 148px;
    cursor: pointer;
    line-height: 146px;
    vertical-align: top;
    text-align: center;
    &:before {
      content: "+";
      font-size: 50px;
      font-weight: 300px;
      color: #ccc;   
    }
    img {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
    }
  }
  .img-list {
    flex: 1;
    padding-left: 30px;
    li {
      float: left;
      width: 60px;
      height: 60px;
      margin: 0 10px;
    }
    img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>